<template>
	<view class="extension">
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" styleType="text" activeColor="#0b0a34"
				@clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0">
				<view class="addActivity">
					<uni-forms ref="baseForm" :modelValue="baseFormData">
						<uni-forms-item label="活动标题" :label-width=width>
							<uni-easyinput v-model="baseFormData.name" placeholder="20字以内" />
						</uni-forms-item>
						<uni-forms-item label="活动内容" :label-width=width>
							<uni-easyinput type="textarea" v-model="baseFormData.content" placeholder="200字以内" />
						</uni-forms-item>
						<uni-forms-item label="活动日期" :label-width=width>
							<picker mode="date" :value="startdate" @change="startDateChange">
								<view class="uni-input">{{startdate}}</view>
							</picker>
							-
							<picker mode="date" :value="enddate" :start="threeDays" @change="endDateChange">
								<view class="uni-input">{{enddate}}</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="营业时间" :label-width=width>
							<picker mode="time" :value="startTime" @change="startTimeChange">
								<view class="uni-input">{{startTime}}</view>
							</picker>
							-
							<picker mode="time" :value="endTime" :start="threeTime" @change="endTimeChange">
								<view class="uni-input">{{endTime}}</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="活动地址" required :label-width=width>
							<uni-easyinput v-model="baseFormData.address" placeholder="请输入详细地址" />
						</uni-forms-item>
					</uni-forms>
					<view class="model" @click="jumpModel">
						选择活动模板
					</view>
					<button type="primary" @click="submit()">提交</button>
				</view>
			</view>
			<view v-if="current === 1">
				<view class="none" v-if="welfareList.length == 0">
					<image src="../../../static/image/暂无优惠券@2x.png" mode="widthFix"></image>
					<text>暂无活动</text>
				</view>
				<view class="welfare" v-for="(item,index ) in welfareList" :key="index">
					<view class="shadow" v-if="item.status==2">
						<view class="unlock" @click="shenhe">
							待审核
						</view>
					</view>
					<view class="nav">
						福利放送
					</view>
					<view class="title">
						<text>活动标题</text><text class="nr">{{item.name}}</text>
					</view>
					<view class="title">
						<text>活动内容</text> <text class="nr">{{item.liveInfo}}</text>
					</view>
					<view class="title">
						<text>活动时间</text><text class="nr"> {{item.startDate}}-{{item.endDate}}</text>
					</view>
					<view class="title">
						<text>营业时间</text> <text class="nr">{{item.startTime}}-{{item.endTime}}</text>
					</view>
					<view class="title">
						<text>活动地址</text> <text class="nr">{{item.address}}</text>
					</view>
					<view class="btn">
						<button class="remove" v-if="item.status==0">已下架</button>
						<button class="release" v-if="item.status==1">已发布</button>
						<button class="remove" v-if="item.status==1" @click="publicFun(item,0)">下架</button>
						<button class="release" v-if="item.status==0" @click="publicFun(item,1)">发布</button>


						<!-- <text class="public remove" v-if="item.status==1">已发布</text>
						<text class="public release" v-if="item.status==0" @click="publicFun(item,1)">发布</text>
						<text class="down release" v-if="item.status==1" @click="publicFun(item,0)">下架</text>

						<text class="grey remove" v-if="item.status==0">已下架</text> -->
					</view>


				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	const {
		mourn,
		theme
	} = useStore()
	const {
		Theme,
		onShow
	} = useTheme()
	const {
		proxy
	} = getCurrentInstance()
	const baseForm = ref()
	const current = ref(0)
	const items = ref(['新增活动', '已添加活动'])
	const startdate = ref('开始日期')
	const enddate = ref('结束日期')
	const startTime = ref('开始时间')
	const endTime = ref('结束时间')
	const threeDays = ref()
	const threeTime = ref()

	const baseFormData = ref({
		name: '',
		content: '',
		address: '',
		startdate: '',
		enddate: '',
		startTime: '',
		endTime: '',
		activeModel: ''
	})
	const width = ref(80)
	const range = ref(['2021-02-1', '2021-3-28'])

	const welfareList = ref([])
	onMounted(() => {
		getList();
	});
	onLoad(options => {
		if (proxy.sjuBase.isNull(proxy.sjuLogin.getValue('xndz_mobile'))) {
			proxy.sjuNav.navigateTo('/intake/login')
		}
	
	})
	onShow(() => {
		if (proxy.sjuLogin.getValue("modelImgSrc")) {
			baseFormData.value.activeModel = proxy.sjuLogin.getValue("modelImgSrc").split(".")[6].split("/")[3]
		}
		console.log(proxy.sjuLogin.getValue("modelImgSrc"))
	})
	const shenhe=()=>{
		proxy.sjuAlert.showError("已进入审核阶段，预计2个工作日内可发布上架");
	}
	const onClickItem = (e) => {
		console.log(e)
		if (current.value != e.currentIndex) {
			current.value = e.currentIndex;
		}
		if (e.currentIndex == 1) {
			getList()
		}
	}
	const startDateChange = (e) => {
		console.log(e)
		startdate.value = e.detail.value
		baseFormData.value.startdate = e.detail.value
		threeDays.value = e.detail.value
	}
	const maskClick = (e) => {
		console.log('maskClick事件:', e);
	}
	const jumpModel = () => {
		proxy.sjuNav.navigateTo('/my/model')
	}

	const endDateChange = (e) => {
		console.log(e)
		enddate.value = e.detail.value
		baseFormData.value.enddate = e.detail.value
	}
	const startTimeChange = (e) => {
		console.log(e)
		startTime.value = e.detail.value
		threeTime.value = e.detail.value
		baseFormData.value.startTime = e.detail.value
	}
	const endTimeChange = (e) => {
		console.log(e)
		endTime.value = e.detail.value
		baseFormData.value.endTime = e.detail.value
	}
	const submit = () => {
		console.log(proxy.sjuLogin.getValue("xndz_merchantCode"))

		//检查非空数组:
		let checkNullArr = [{
			val: baseFormData.value.name,
			msg: '请输入活动名称'
		}, {
			val: baseFormData.value.content,
			msg: '请输入活动内容'
		}, {
			val: baseFormData.value.startdate,
			msg: '请输入活动开始日期'
		}, {
			val: baseFormData.value.enddate,
			msg: '请输入活动结束日期'
		}, {
			val: baseFormData.value.startTime,
			msg: '请选择开始时间'
		}, {
			val: baseFormData.value.endTime,
			msg: '请选择结束时间'
		}, {
			val: baseFormData.value.address,
			msg: '请输入详细地址'
		}, {
			val: baseFormData.value.activeModel,
			msg: '请选择活动模板'
		}];
		if (proxy.sjuBase.checkArrayNotNull(checkNullArr)) {
			console.log(baseFormData.value.activeModel)
			proxy.sjuRequest.request("/api/shanghu/addLive/" + proxy.sjuConfig.appInfo.appId, 'post', {
				"name": baseFormData.value.name,
				// "liveDate": baseFormData.value.startdate,
				"startDate": baseFormData.value.startdate,
				"endDate": baseFormData.value.enddate,
				"startTime": baseFormData.value.startTime,
				"endTime": baseFormData.value.endTime,
				"liveInfo": baseFormData.value.content,
				"address": baseFormData.value.address,
				"activeModel": baseFormData.value.activeModel,
				"userCode": proxy.sjuLogin.getValue("xndz_merchantCode")
			}).then(res => {
				console.log(res)
				if (res.code == "0000") {
					// msgOrderNo.value = res.msgOrderNo;
					proxy.sjuAlert.showInfo('保存成功', 2000)
					baseFormData.value.name = ''
					baseFormData.value.startdate = ''
					baseFormData.value.startTime = ''
					baseFormData.value.endTime = ''
					baseFormData.value.content = ''
					baseFormData.value.address = ''
					baseFormData.value.enddate = ''
					startdate.value = '请选择开始日期'
					startTime.value = '开始时间'
					endTime.value = '结束时间'

					baseFormData.value.activeModel = ''

					proxy.sjuLogin.clearKey("modelImgSrc");
					getList()
				} else {
					// proxy.sjuAlert.showError("验证码发送失败");
				}
			})
		}


	}


	const getList = () => {
		console.log(proxy.sjuLogin.getValue("xndz_merchantCode"))
		proxy.sjuRequest
			.request(
				"/api/shanghu/getShangHuLiveList/" + proxy.sjuConfig.appInfo.appId,
				"post", {
					shangHuCode: proxy.sjuLogin.getValue("xndz_merchantCode"),
				}
			)
			.then((res) => {
				console.log(res);
				if (res.code == "0000") {
					welfareList.value = res.data;
					console.log(welfareList.value)
				} else if (res.code == "0001") {
					proxy.sjuAlert.showError(res.msg);
				} else {}
			});
	};
	const publicFun = (item, index) => {
		console.log(item.id);
		console.log(index);
		proxy.sjuRequest
			.request(
				"/api/shanghu/changeLive/" + proxy.sjuConfig.appInfo.appId,
				"post", {
					id: item.id,
					status: index,
				}
			)
			.then((res) => {
				console.log(res);
				if (res.code == "0000") {
					getList();
				} else if (res.code == "0001") {
					proxy.sjuAlert.showError(res.msg);
				} else {}
			});
	};
</script>

<style lang="scss">
	.extension {
		width: 100%;
		// height: 100%;
		padding: 0 10px;
		box-sizing: border-box;

		.none {
			width: 100%;
			height: auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 60%;
			}
		}

		::v-deep {
			.uni-forms-item__content {
				background: #f6f7fb;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				uni-picker {
					width: 40%;
					text-align: center;
					color: #999;
				}

			}

			.uni-easyinput__content,
			.uni-easyinput__content-textarea,
			.uni-easyinput__content-input {
				border: none;
				background: #f6f7fb;

			}
		}

		.addActivity {
			width: 100%;
			height: 500px;
			margin-top: 20px;
			background: #fff;
			border-radius: 20px;
			padding: 15px;
		}

		.content {
			.model {
				display: flex;
				justify-content: flex-end;
				color: #0091ff;
				margin-bottom: 10px;


			}
		}
	}

	.welfare {
		width: 96%;
		height: auto;
		margin: 10px 2%;
		margin-bottom: 30px;
		background: #fff;
		border-radius: 20px;
		padding: 10px 20px;
		box-sizing: border-box;
		position: relative;
		.shadow{
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.2);
			z-index: 99;
			position: absolute;
			top:0;
			left: 0;
			.unlock{
				position: absolute;
				top:20px;
				right: 20px;
				padding:10px 20px;
				box-sizing: border-box;
				background-color: #999;
				border-radius: 10px;
				color: #f6f7fb;
			}
		}

		.nav {
			font-size: 16px;
			font-weight: bold;
			font-weight: bold;
			line-height: 2;
		}

		.title {
			line-height: 35px;
			font-size: 14px;
			display: flex;
			flex-direction: row;
			color: #4d4e51;

			text {
				flex-basis: 80px;
			}

			.nr {
				flex-grow: 1;
			}
		}

		.btn {
			display: flex;
			flex-direction: row;
			margin-top: 10px;

			button {
			font-size: 14px;
			height: 30px;
			line-height: 30px;
			width: 35%;
			margin: 0 7%;
			border-radius: 30px;
			color: #fff;
			}

			::v-deep uni-button:after {
				border: none !important;
			}

			.remove {
				background-image: linear-gradient(to right, #acd3fe, #73b1f5);
			}

			.release {
				background-image: linear-gradient(to right, #191765, #0b0a35);
			}
		}
	}
</style>